<script setup lang="ts">
    import { ref } from "vue";
    import type { UploadUserFile } from "element-plus";
    import {uploadFiles} from '@/api/upload'
    const fileList = ref([])
    let gress = 0
    const changeFile = (file)=>{
      let chunkData = 0
      const chunk = 1024*1024
      let fileList = []

      while(chunkData < file.raw.size){
        fileList.push(file.raw.slice(chunkData,chunkData+chunk))
        chunkData += chunk
      }
      upload(fileList)
    }
    const upload = (fileList)=>{
      fileList.forEach(async (file,index:UploadUserFile)=>{
        const formData = new FormData()
        formData.append('chunk',file)
        formData.append('index',index)
        
        const res = await uploadFiles(formData)
        if(res.code === 1000){
          gress++
        }
      })
    }
    const stop = ()=>{
      
    }
    const onprogress = (event,file,fileList)=>{
      file.percentage = gress
    }
</script>

<template>
  <h3>切片上传 & 断点续传</h3>
<el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    multiple
    :on-progress="onprogress"
    @change="changeFile"
    :limit="3"
  >
    <el-button type="primary">上传文件</el-button>
    <el-button @click="stop">停止上传</el-button>
    <template #tip>
      <div class="el-upload__tip">
        
      </div>
    </template>
  </el-upload>
<ul>
  关键点
  <li>1.前端文件切片</li>
  <li>2.生成唯一的hash值</li>
  <li>3.接受分片临时储存</li>
  <li>4.合并分片</li>
</ul>
</template>

<style scoped>


</style>
